<script setup lang="ts">
import { ref } from 'vue';
import { useDealer } from './dealer';
import { TreeNode } from '/@/utils/division';
import { ElMessage } from 'element-plus';
const store = useDealer();
const orgName = ref('');
const visible = ref(false);
const options = ref<TreeNode[]>([]);
const regions = ref([]);
const orgId = ref('');
const openDialog = (row: any) => {
	orgId.value = row.orgId;
	visible.value = true;
	orgName.value = row.orgName;
	regions.value = row.regions;
	store.getDivision().then((res) => {
		options.value = res;
	});
};
defineExpose({
	openDialog,
});
const props = {
	multiple: true,
	checkStrictly: true,
};
const handleClose = (done: () => void) => {
	// visible.value = false;
	done();
};
const emit = defineEmits(['refresh']);
const saveRegion = () => {
	console.log(JSON.stringify(regions.value));
	store.updateRegions(orgId.value, JSON.stringify(regions.value)).then(() => {
		visible.value = false;
		ElMessage.success('保存成功');
		emit('refresh');
	});

	visible.value = false;
};
</script>

<template>
	<el-dialog title="区域选择" v-model="visible" width="500px" :close-on-click-modal="false" destroy-on-close :before-close="handleClose">
		<div style="display: flex; flex-direction: column; margin: 20px">
			<el-form label-width="auto">
				<el-form-item label="代理商名称:">
					{{ orgName }}
				</el-form-item>
				<el-form-item label="代理区域:">
					<el-cascader :options="options" :props="props" clearable v-model="regions" />
				</el-form-item>
			</el-form>
			<!-- <div style="display: flex; flex-direction: row; justify-content: start; align-items: center">
				<div>代理商名称：</div>
				<div>{{ orgName }}</div>
			</div>
			<div style="display: flex; flex-direction: row; justify-content: start; align-items: center">
				<div style="width: 120px">代理区域：</div>
				<el-cascader :options="options" :props="props" clearable v-model="regions" />
			</div> -->
			<div style="margin-top: 20px; display: flex; flex-direction: row; justify-content: center; align-items: center">
				<el-button plain @click="visible = false">取消</el-button>
				<el-button type="primary" @click="saveRegion">确定</el-button>
			</div>
		</div>
	</el-dialog>
</template>
